<template>

  <div class="app-main">
    <button class="add" @click="addSection">新增</button>

    <el-table :data="tableData" style="margin-top: 20px;" border>

      <el-table-column prop="section" label="模块名称" width="180" align="center"/>
      <el-table-column prop="sectionTypeLable" label="模块类型" width="180" align="center"/>

      <el-table-column
        prop="productUrl"
        label="产品图"
        align="center"
        width="180">
        <template slot-scope="scope">
           <el-image
                style="width: 60px; height: 60px"
                :src="imageHost + scope.row.productUrl"
                :preview-src-list="[imageHost + scope.row.productUrl]"
                  />
        </template>
      </el-table-column>

      <el-table-column
        prop="bgUrl"
        label="背景图"
        align="center"
        width="180">
        <template slot-scope="scope">
           <el-image
                style="width: 60px; height: 60px"
                :src="imageHost + scope.row.bgUrl"
                :preview-src-list="[imageHost + scope.row.bgUrl]"
                  />
        </template>
      </el-table-column>

      <el-table-column prop="title" label="标题" width="180" align="center"/>
      <el-table-column prop="titleEn" label="标题英文" width="180" align="center"/>
      <el-table-column prop="description" label="描述" width="180" align="center"/>
      <el-table-column prop="descriptionEn" label="描述英文" width="180" align="center"/>

      <el-table-column label="操作" align="center"  width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- ref 声明变量 -->
    <DialogAdd ref="DialogAdd" @custom-event="fetchList"/>

    <UpdateSectionDialog ref="updateDialog" :form="form" @custom-event="fetchList"></UpdateSectionDialog>

    <DeleteDialog ref="deleteDialog" :formId="formId" @delete-event="onSubmitDelete"/>

  </div>

</template>

<script>
    // 使用相对路径
    import { getSectionList,deleteSection,getBannerSectionList} from "@/api/system/about_us_section";
    import DialogAdd from "./components/DialogAdd.vue";
    import UpdateSectionDialog from "./components/UpdateSectionDialog.vue";
    import DeleteDialog from "@/components/DeleteDialog.vue";
    import { imageHost } from "@/api/ImageHost";

    export default{
      components:{DialogAdd,UpdateSectionDialog,DeleteDialog},
      data(){
        return{
          imageHost:'',
          bannerSectionList:[],
          tableData:[],
          form: {
              id:-1,
              fileType:'',
              productUrl:'',
              bgUrl:'',
              title:'',
              titleEn:'',
              description:'',
              descriptionEn:'',
              section:''
          },
          formId:-1

        }
      },
      created(){
         this.imageHost=imageHost();
         this.fetchList();
         getBannerSectionList().then(response=>{
             this.bannerSectionList = response.data;
         })

      },
      methods:{
         // 分页查询
         fetchList(){
          // const params = {pageNum:1,pageSize:20}

          getSectionList().then(response=>{
             this.tableData = response.data;
             this.sectionTypeFilter(this.tableData)
          })

         },
         sectionTypeFilter(list){
            list.forEach(it => {
                if(it.fileType === "0"){
                  it.sectionTypeLable = '图片'
                }else if(it.fileType === "1"){
                  it.sectionTypeLable = '轮播图'
                }else{
                  it.sectionTypeLable = '未知类型'
                }
            });
         },
         addSection(){
           this.$refs['DialogAdd'].setBannerSection(this.bannerSectionList);
           this.$refs['DialogAdd'].showDialog();

         },

         handleUpdate(row){
            this.$refs['updateDialog'].showDialog();
            // 将一个对象的所有属性值都赋值给另一个对象
            Object.assign(this.form, row);
            // console.log(this.form); // 输出: { a: 1, b: 2, c: 3 }

         },
         handleDelete(row){
            this.$refs['deleteDialog'].showDialog();
            this.formId=row.id;

         },
          onSubmitDelete(data){
              deleteSection(data).then(response => {
                console.log(response);
                this.$refs['deleteDialog'].hideDialog();
                this.fetchList();

              });
          }

      },

    }
</script>


<style scoped>

.app-main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

}

.add{
    width: 60px;
    height: 30px;
    margin-left: 15px;
    margin-top: 15px;
    background-color:#409EFF;
    border:none;
    border-radius: 5px;
    color: #ffffff;

}



</style>
